<template>
	<view class="label">
		<view class="label-box">
			<view class="label-header">
				<view class="label-title">我的标签</view>
				<view class="label-edit" @click="setEdit">{{ isEdit?"完 成": "编 辑" }} </view>
			</view>
			<view class="label-conern">
				<uni-load-more v-if=" myLabelList.length == 0" status="loading"></uni-load-more>
				<view v-for="(item, index) in myLabelList"  @click="del(index)"  :key = "item.name" class="label-conern-item">
					{{item.name}}
					<uni-icons v-if="isEdit" class="icons-close" type="close" size="20" color="red"></uni-icons>
				</view>
			</view>
		</view>
		<view class="label-box">
			<view class="label-header">
				<view class="label-title">推荐标签</view>
			</view>
			<view class="label-conern">
				<uni-load-more v-if=" LabelList.length == 0" status="loading"></uni-load-more>
				<view v-for="(item, index) in LabelList"  @click="add(index)" :key = "item.name" class="label-conern-item">
					{{item.name}}
					<uni-icons v-if="isEdit" class="icons-close" type="plus" size="20" color="green"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				isEdit:false,
				myLabelList:[],
				LabelList:[],
			};
		},
		mounted() {
			this.getLabel()
		},
		computed: {
			...mapState(['user_id'])
		},
		methods:{
			setEdit(){
				// this.isEdit = !this.isEdit
				if (this.isEdit) {
					this.isEdit = false
					this.setUpdate_label(this.myLabelList)
				} else {
					this.isEdit = true
				}
			},
			async setUpdate_label(label){
				let newLabel = []
				label.forEach(e=> newLabel.push(e._id))
				let articleList = await this.$api.update_label({
					label:newLabel,
					user_id: this.user_id
				})
				if (!articleList) return false;
				// 全局自定义事件注册
				uni.$emit("labelChange","我是传过去的参数")
				// console.log(articleList);
			},
			add(index){
				if (!this.isEdit) return false;
				this.myLabelList.push(this.LabelList[index])
				this.LabelList.splice(index,1)
			},
			del(index){
				if (!this.isEdit) return false;
				this.LabelList.push(this.myLabelList[index])
				this.myLabelList.splice(index,1)
				},
			async getLabel() {
				let LabelList = await this.$api.get_label({type:'all'})
				// await LabelList.unshift({name:"全部",user:[]})
				// tabbarList.push({name:"全部",user:[]})
				console.log(LabelList, 'tabbarListtabbarList')
				this.myLabelList = LabelList.filter(item => item.current)
				this.LabelList = LabelList.filter(item => !item.current)
			},
			
		}
	}
</script>

<style scoped lang="scss">
.label{
	.label-box{
		background: #fff;
		margin-bottom: 10px;
		.label-header{
			display: flex;
			justify-content: space-between;
			padding: 10px 15px;
			font-size: 14px;
			color: #666;
			border-bottom: 1px solid #f5f5f5;
					.label-title {
						color: $uni-color-warning;
					}
			.label-edit{
				color: #ccc;
			
			}
		}

				.label-conern {
					display: flex;
					flex-wrap: wrap;
					padding: 15px;
					padding-top: 0px;

					.label-conern-item {
						position: relative;
						padding: 2px 10px;
						margin-top: 12px;
						margin-right: 10px;
						border-radius: 5px;
						border: 1px #666 solid;
						// background-color: #eee;
						font-size: 14px;
						color: #333;
						.icons-close{
							position: absolute;
							right: -8px;
							top: -8px;
							background-color: #fff;
							border-radius: 50%;
						}
					}
				}
	}
}
</style>
